<template>
    <Header />
    <div class="body">
        <div class="topBar bgColF9 pd20 flex-aliign-center">
            <div class="flex-aliign-center mr30 addAndDel">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
                    version="1.1" width="18" height="18" viewBox="0 0 18 18">
                    <defs>
                        <clipPath id="master_svg0_354_38947">
                            <rect x="0" y="0" width="18" height="18" rx="0" />
                        </clipPath>
                    </defs>
                    <g clip-path="url(#master_svg0_354_38947)">
                        <g>
                            <path
                                d="M9.036078125,1.09765625Q10.674078125,1.09765625,12.123078125,1.71865625Q13.572078125,2.33965625,14.652078125,3.41965625Q15.732078125,4.49965625,16.353078125,5.94865625Q16.974078125,7.39765625,16.974078125,9.035656249999999Q16.974078125,10.69165625,16.353078125,12.13165625Q15.732078125,13.57165625,14.652078125,14.65165625Q13.572078125,15.73165625,12.123078125,16.352656250000003Q10.674078125,16.973656249999998,9.036078125,16.973656249999998Q7.380078125,16.973656249999998,5.931078125,16.352656250000003Q4.482078125,15.73165625,3.402078125,14.65165625Q2.322078125,13.57165625,1.701078125,12.13165625Q1.080077923834,10.69165625,1.080078125,9.035656249999999Q1.080078125,7.39765625,1.701078125,5.94865625Q2.322078125,4.49965625,3.402078125,3.41965625Q4.482078125,2.33965625,5.931078125,1.71865625Q7.380078125,1.097655780613,9.036078125,1.09765625ZM13.572078125,10.13365625Q14.040078125,10.13365625,14.364078125,9.80065625Q14.688078125,9.46765625,14.688078125,8.999656250000001Q14.688078125,8.531656250000001,14.364078125,8.20765625Q14.040078125,7.88365625,13.572078125,7.88365625L10.188078125,7.88365625L10.188078125,4.49965625Q10.188078125,4.03165625,9.855078125,3.69865625Q9.522078125,3.36565625,9.054078125,3.36565625Q8.586078125,3.36565625,8.262078125,3.69865625Q7.938078125,4.03165625,7.938078125,4.49965625L7.938078125,7.88365625L4.554078125,7.88365625Q4.086078125,7.88365625,3.762078125,8.20765625Q3.438078125,8.531656250000001,3.438078125,8.999656250000001Q3.438078125,9.46765625,3.762078125,9.80065625Q4.086078125,10.13365625,4.554078125,10.13365625L7.938078125,10.13365625L7.938078125,13.49965625Q7.938078125,13.96765625,8.262078125,14.30065625Q8.586078125,14.63365625,9.054078125,14.63365625Q9.522078125,14.63365625,9.855078125,14.30065625Q10.188078125,13.96765625,10.188078125,13.49965625L10.188078125,10.13365625L13.572078125,10.13365625Z"
                                fill="#4EA373" fill-opacity="1" />
                        </g>
                    </g>
                </svg>
                <span class="ml10">添加</span>
            </div>
            <div class="flex-aliign-center addAndDel">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
                    version="1.1" width="18" height="18" viewBox="0 0 18 18">
                    <defs>
                        <clipPath id="master_svg0_354_38955">
                            <rect x="0" y="0" width="18" height="18" rx="0" />
                        </clipPath>
                    </defs>
                    <g clip-path="url(#master_svg0_354_38955)">
                        <g>
                            <path
                                d="M15.740421875,2.091180625L11.917221875,2.091180625Q11.339871875,2.109126625,10.886291875,1.617564625C10.703551875,1.405740625,10.397531875,1.199280725,9.894491875,1.181640625L9.170561875,1.181640625L9.060171875,1.181640625L8.336261875,1.181640625C7.833201875,1.199298725,7.527111875,1.405758625,7.344461875,1.617564625Q6.890811875,2.109126625,6.313511875,2.091180625L2.490333875,2.091180625C2.244363875,2.091180625,2.04492375255,2.290620625,2.04492375255,2.536590625L2.04492375255,4.172950625Q2.043987796,4.646280625,2.503419875,4.636960625L3.3794818749999997,4.636960625L3.3794818749999997,16.059640625Q3.309751875,16.834540625000002,4.084741875000001,16.876240625L8.818831875,16.876240625L9.411891875,16.876240625L9.953441875,16.880440625L10.630201875,16.880440625L13.705221875,16.880440625L14.132321875,16.880440625L14.146121875,16.876240625Q14.920921875,16.834540625000002,14.851221875,16.059640625L14.851221875,4.636960625L15.727421875,4.636960625Q16.186721875,4.646280625,16.185921875,4.172950625L16.185921875,2.536590625C16.185821875000002,2.290640625,15.986421875,2.091180625,15.740421875,2.091180625ZM7.567901875,14.117540625C7.567901875,14.417140625,7.324831875,14.660040625,7.025341875,14.660040625C6.725771875,14.660040625,6.482791875,14.417040625,6.482791875,14.117540625L6.482791875,5.637220625C6.482791875,5.337640625,6.725791875,5.0946606249999995,7.025341875,5.0946606249999995C7.324841875,5.0946606249999995,7.567901875,5.337660625,7.567901875,5.637220625L7.567901875,14.117540625ZM11.661781875,14.117540625C11.661781875,14.417140625,11.418781875,14.660040625,11.119231875,14.660040625C10.819721875,14.660040625,10.576671875,14.417040625,10.576671875,14.117540625L10.576671875,5.637220625C10.576671875,5.337640625,10.819741875,5.0946606249999995,11.119231875,5.0946606249999995C11.418781875,5.0946606249999995,11.661781875,5.337660625,11.661781875,5.637220625L11.661781875,14.117540625Z"
                                fill="#FF0000" fill-opacity="1" />
                        </g>
                    </g>
                </svg>
                <span class="ml10">删除</span>
            </div>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="姓名" width="150" />
            <el-table-column prop="phone" label="手机号" width="120" />
            <el-table-column prop="sex" label="性别" width="120" />
            <el-table-column prop="job" label="单位" width="160" />
            <el-table-column prop="email" label="邮箱" width="400" />
            
            <el-table-column fixed="right" label="操作" width="120">
                <template #default>
                    <el-button link type="primary" size="small" @click="handleClick">编辑</el-button>
                    <el-button link type="primary" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script lang="ts" setup>
    import Header from '@/components/Header.vue'
    const handleClick = () => {
        console.log('click')
    }

    const tableData = [
        {
            phone: '18811112222',
            name: '王五',
            sex: '男',
            job: '南宁市政府',
            email: '123456789',
        },
        // 更多表格数据
        {
            phone: '18811112222',
            name: '王五',
            sex: '男',
            job: '南宁市政府',
            email: '123456789',
        },



    ]
</script>
<style lang="scss" scoped>
    @import '@/assets/variables.scss';

    .body {
        max-width: $border-primary-max-width;
        margin: 30px auto;

        .topBar {
            height: 50px;

            .addAndDel {
                cursor: pointer;
            }

        }
    }
</style>